<template>
  <div class="login_box">
    <div class="login_container">
      <div class="login_img">
        <img src="../../images/login_img.png" alt="">
      </div>
      <div class="login_form_new">
        <div class="login-tabs">
          <div class="login-tabs-l" :active="loginType === '1'" @click="loginType = '1'">账户登录</div><div class="login-tabs-r" :active="loginType === '2'" @click="loginType = '2'">手机号登录</div>
        </div>
        <div class="login_form">
          <div v-show="loginType === '1'">
            <div class="form">
              <div class="form-item">
                <input type="text" v-model.trim="loginForm.username" ref="loginInputUser" placeholder="请输入用户名" @focus="focusInput" class="login_input" autocomplete="off"/>
              </div>
              <div class="form-item">
                <input type="password" v-model.trim="loginForm.password"  ref="loginInputPwd" placeholder="请输入密码" @focus="focusInput" class="login_input" autocomplete="off" @keydown.13="loginIn('loginForm')"/>
              </div>
              <p class="error" style="width: 70%;float: left;" :class="{'opacity1': error.status}"><i class="el-icon-warning"></i>{{error.text}}</p>
              <a class="form-item btn-register" style="width: 30%;float: left;" @click="goPage('Forget')">
                <span class="color-gray99" >忘记密码？</span>
              </a>
              <div class="form-item">
                <button class="btn-login" @click="loginIn('loginForm')" :disabled="!loginDisable">确定</button>
              </div>
              <a class="form-item btn-register" @click="goPage('Register')">
                还没有帐户？<span class="color-blue">立即注册</span>
              </a>
            </div>
          </div>
          <div v-show="loginType === '2'">
            <div class="form">
              <div class="form-item">
                <input type="text" v-model.trim="loginFormMobile.mobile" ref="loginInputUser" placeholder="请输入手机号" maxlength="11" @focus="focusInput" class="login_input" autocomplete="off"/>
              </div>
              <div class="form-item" style="position: raletive">
                <input type="text" v-model.trim="loginFormMobile.imgVerifyCode"  ref="loginInputImgcode" placeholder="请输入图形验证码" @focus="focusInput" maxlength="6" class="login_input slot-right" autocomplete="off" @keydown.13="loginIn('loginForm')"/>
                <img v-show="codeImg" :src="codeImg" class="codeImg" @click="verifyImage"/>
              </div>
              <div class="form-item" style="position: raletive">
                <input type="password" v-model.trim="loginFormMobile.code"  ref="loginInputPwd" placeholder="请输入验证码" @focus="focusInput" maxlength="6" class="login_input slot-right" autocomplete="off" @keydown.13="loginIn('loginForm')"/>
                <el-button :disabled="isDisabled" class="codeBtn" @click="sendMsg">{{buttonName}}</el-button>
              </div>
              <p class="error" style="width: 70%;float: left;" :class="{'opacity1': error.status}"><i class="el-icon-warning"></i>{{error.text}}</p>
              <a class="form-item btn-register" style="width: 30%;float: left;" @click="goPage('Forget')">
                <span class="color-gray99">忘记密码？</span>
              </a>
              <div class="form-item">
                <button class="btn-login" @click="loginIn('loginFormMobile')" :disabled="!loginDisable">确定</button>
              </div>
              <a class="form-item btn-register" @click="goPage('Register')">
                还没有帐户？<span class="color-blue">立即注册</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="login-bg">
      <img src="../../images/bg_login.jpg" /> 
    </div> -->
  </div>
</template>

<script>
import { setToken, sendCode, verifyImage } from '@/service/get-data'
import { Form, FormItem, Button, Input, Tabs, TabPane } from 'element-ui'
import { getCookie } from '@/config/mUntils'
import { judgeWareHouseIdMixin } from '@/mixins'
import { mapState, mapActions } from 'vuex'

export default {
  mixins: [judgeWareHouseIdMixin],
  components: {
    elForm: Form,
    elFormItem: FormItem,
    elButton: Button,
    elInput: Input,
    elTabs: Tabs,
    elTabPane: TabPane
  },
  data () {
    return {
      loginType: '1',
      loginForm: {
        username: '',
        password: ''
      },
      loginFormMobile: {
        mobile: '',
        code: '',
        imgVerifyCode: '' // 图形验证码
      },
      // 登录验证出错
      error: {
        status: false,
        text: '验证出错'
      },
      buttonName: '发送短信',
      isDisabled: false, // 发送验证码按钮置灰bool
      codeSent: false, // 是否发送过验证码
      time: 60,
      codeImg: '' // 图形验证码base64
    }
  },
  computed: {
    // 确定按钮置灰bool
    loginDisable () {
      if (this.loginType === '1') {
        return this.loginForm.username !== '' && this.loginForm.password !== ''
      } else if (this.loginType === '2') {
        return this.loginFormMobile.mobile !== '' && this.loginFormMobile.code !== '' && this.codeSent
      }
    },
    ...mapState({
      username: state => state.user.username,
      IPCode: state => state.IPCode
    }),
    loginStatus () {
      return this.$store.getters.loginStatus
    }
  },
  methods: {
    ...mapActions(['fetchWarehouseId']),
    // // 获取分仓id
    loginIn (formname) {
      if (this.loginType === '1') {
        if (!this.loginForm.username) {
          this.$message.error('请输入用户名')
          return false
        } else if (!this.loginForm.password) {
          this.$message.error('请输入密码')
          return false
        }
      } else if (this.loginType === '2') {
      }
      let dispatchForm = {...this[formname]}
      dispatchForm.type = this.loginType // 带上登录类型
      this.$store.dispatch('GETUSER', dispatchForm).then((res, rej) => {
        // return 的数据
        if (res.resultCode === 2000) {
          setToken(true)
          let needStatus = getCookie('needUpdateStatus')
          let Exam = parseInt(getCookie('Exam'))
          if (needStatus === 'true' || Exam === 3) {
            this.$store.commit('EXAMNODO', true)
          }
          this.judgeWareHouseId()
          this.$router.push(this.$route.query.redirect || '/')
        } else {
          this.error.status = true
          this.error.text = res.resultMsg
          if (res.resultCode === 4004) {
            this.$refs.loginInputUser.focus()
          }
          return false
        }
      })
    },
    // 获取图形验证码
    async verifyImage () {
      let res = await verifyImage()
      if (res.status === 200) {
        var windowUrl = window.URL || window.webkitURL // 处理浏览器兼容性
        this.codeImg = windowUrl.createObjectURL(res.data)
      }
    },
    // 发送验证码
    async sendMsg () {
      this.isDisabled = true
      // 手机格式判断↓未添加
      let res = await sendCode(this.loginFormMobile.mobile, 2, this.loginFormMobile.imgVerifyCode)
      res = res.data
      if (res.resultCode && res.resultCode === 2000) {
        this.timmer()
        this.codeSent = true
      } else {
        this.verifyImage() // 重新获取验证码
        this.isDisabled = false
        this.$message({
          message: res.resultMsg
        })
      }
    },
    // 验证码计时器
    timmer () {
      let _this = this
      // _this.isDisabled = true
      setTimeout(function () {
        _this.buttonName = `重新发送(${_this.time})`
        --_this.time
        if (_this.time < 0) {
          _this.buttonName = '重新发送'
          _this.time = 60
          _this.isDisabled = false
        } else {
          _this.timmer()
        }
      }, 1000)
    },
    goPage (toutername) {
      this.$router.push({name: toutername})
    },
    focusInput () {
      this.error.status = false
    }
  },
  created () {
  },
  mounted () {
    this.verifyImage()
  }
}
</script>


<style lang="scss" scoped>
  .login-tabs{
    cursor: pointer;
    div{
      width: 50%;
      height: 54px;
      line-height: 54px;
      text-align: center;
      display: inline-block;
      box-sizing: border-box;
      border-bottom: 1px solid #f4f4f4;
      background-color: #EBEBEB;
      &[active]{
        background-color: #fff;
      }
    }
  }
  .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
  
  .login_box{
    position: absolute;
    height: calc( 100% - 278px);
    width: 100%;
    // min-height: 700px;
    overflow: hidden;
    height:100%;
    background: #FFB100;
  }
  .login_form{
    position: relative;
    float: right;
    z-index: 50;
    padding: 50px 26px 20px 24px;
    width: 280px;
  }
  .form-item{
    position: relative;
    font-size: 14px;
    margin-bottom: 10px;
    display: inline-block;
    border-radius: 5px;
    width: 100%;
    .item-icon{
      position: absolute;
      height: 50px;
      left: 12px;
      top: 0;
      text-align: center;
      color: #333;
      -webkit-transition: all .3s;
      transition: all .3s;
      line-height: 50px;
      font-size: 20px;
      width: 22px;
    }
  }
  .login_input{
    background: #E9E9E9;
    width: calc(100% - 20px);
    padding: 15px 0 14px 20px;
    border-radius: 5px;
    color: #333;
  }
  .login_input.slot-right{
    width: calc(100% - 120px);
    padding-right: 100px;
  }
  .codeBtn{
    position: absolute;
    font-size: 12px;
    background-color: #FFC400;
    color: #333;
    border: none;
    right: 0;
    top: 0;
    width: 100px;
    height: 45.8px;
    &:disabled{
      border: 1px solid #E6E6E6;
      background-color: #fff;
      color: #333;
      &:hover{
        color: #333;
      }
    }
    &:hover{
      color: #333;
    }
  }
  .codeImg{
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
    height: 45.8px;
    cursor: pointer;
  }
  .btn-register{
    cursor: pointer;
    font-size: 12px;
    text-align: right;
    color: #6B6B6B;
  }
  .btn-login{
    display: inline-block;
    width: 100%;
    border: none;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #ffe100;
    color: #000;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    font-weight: 500;
    padding: 15px 20px;
    font-size: 16px;
    border-radius: 2px;
    &:disabled{
      background-color: #e9e9e9;
    }
  }
 .logo_img_box{
    text-align: center;
    margin-bottom: 50px;
    .logo_img{
      display: inline-block;
      width: 180px;
      & > img{
        width: 100%;
      }
    }
  }
  .error-box{
    background: #ffd6d4;
    font-size: 14px;
    color: #000000;
    transition: all 0.5s ease-in;
    width: calc(100% - 15px);
    padding: 15px 0 15px 15px;
    border-radius: 2px;
    i{
      color: #f65939;
      font-size: 18px;
      vertical-align: middle;
    }
    .text{
      padding-left: 5px;
    }
  }
  .error{
    color: #ff0000;
    font-size: 14px;
    margin-bottom: 20px;
    opacity: 0;
    transition: all 0.3s ease;
  }
  .opacity1{opacity: 1;}
  .login_container{
    position: relative;
    margin: 0 auto;
    display: flex;
    // margin-top: 10%;
    z-index: 50;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    max-width: 1200px;
    .login_img{
      float: left;
      width: 72.5%;
      & > img{
        width: 100%;
      }
    }
  }
  .login_form_new{
    height: 400px;
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
  }
</style>


